<template>
<div class="app-container calendar-list-container">
<el-row>
  <el-col :span="4">

    <el-select class="filter-item" v-model="listQuery.sessions" placeholder="请选择届别" @change="jieChange">
      <el-option v-for="item in  jieOptions" :key="item" :label="'第' + item +'届'" :value="item"> </el-option>
    </el-select>

    <el-tree
        class="filter-tree"
        :data="treeData"
        node-key="type"
        highlight-current
        :props="defaultProps"
        :filter-node-method="filterNode"
        :default-expanded-keys="['0']"
        ref="menuTree"
        @node-click="getNodeData">
      </el-tree>

  </el-col>
  <el-col :span="20">
     <el-card>
       <div class="talent-list-wrap">

            <!-- 条件筛选区 START -->

              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="搜索条件">
                  <el-row :gutter="8">
                    <el-col :span="6">
                        <el-select class="filter-item" v-model="searchSelectObj.searchKey" placeholder="请选择搜索字段" style="width: 100%;" clearable>
                            <el-option label="姓名" value="name"></el-option>
                            <!-- <el-option label="年龄"  value="age"></el-option> -->
                            <el-option label="专业"  value="universityProfession"></el-option>
                            <el-option label="联系电话"  value="phone"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                          <el-input style="width: 100%;" class="filter-item" placeholder="请先选择搜索条件再输入" @keyup.enter.native="handleFilter" v-model="searchSelectObj.searchValue" clearable> </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button class="filter-item ml20" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
                    </el-col>
                  </el-row>

                </el-form-item>

              <el-form-item label="现所在地" prop="lastWorkProvinceId">
                <el-row :gutter="8">
                    <el-col :span="6">
                        <el-select class="filter-item" v-model="listQuery.lastWorkProvinceId" placeholder="请选择省份" style="width: 100%;" @change="provinceChange" clearable>
                          <el-option v-for="item in  provinceOptions" :key="item.name" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select class="filter-item" style="width: 100%;" v-model="listQuery.lastWorkCityId" placeholder="请选择所在地市区" clearable>
                          <el-option v-for="item in  cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>

            <div class="form-search-area">
               <el-form-item label="性别">
                  <el-radio-group v-model="listQuery.sex">
                    <el-radio :label="null">全部</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item class="search-degree-form-item" label="学历">
                  <el-radio-group v-model="listQuery.degree">
                    <el-radio :label="null">全部</el-radio>
                    <el-radio :label="5">博士及以上</el-radio>
                    <el-radio :label="4">硕士</el-radio>
                    <el-radio :label="3">本科</el-radio>
                    <el-radio :label="2">大专</el-radio>
                    <el-radio :label="1">高中</el-radio>
                  </el-radio-group>
                </el-form-item>

              <el-form-item label="工作年限">
                  <el-radio-group v-model="listQuery.workTimeSpan">
                    <el-radio :label="null">全部</el-radio>
                    <el-radio :label="0">无经验</el-radio>
                    <el-radio :label="1">一年及以上</el-radio>
                    <el-radio :label="2">两年及以上</el-radio>
                    <el-radio :label="3">三年及以上</el-radio>
                    <el-radio :label="5">五年及以上</el-radio>
                  </el-radio-group>
                </el-form-item>
            </div>


              </el-form>


            <!-- 条件筛选区 END -->
           <div class="filter-container">
              <el-button-group>
                <el-button type="primary" icon="plus" @click="handlerAdd">添加简历</el-button>
                <el-button type="primary" icon="plus" @click="downloadTemplate">下载模板</el-button>
                <el-button type="primary" icon="edit" @click="handleImport">批量导入</el-button>
                <el-button type="primary" icon="delete" @click="handleExport">批量导出</el-button>
              </el-button-group>
            </div>

           <!-- 数据表格区 START -->  
          <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="35"> </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="65">
            </el-table-column>
            <el-table-column width="100" align="center" label="姓名"> <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template> 
            </el-table-column>
            <el-table-column width="50" align="center" label="性别"> <template slot-scope="scope">
                    <span v-if="scope.row.sex == 0">女</span>
                    <span v-if="scope.row.sex == 1">男</span>
                  </template> 
            </el-table-column>
            <el-table-column width="50" align="center" label="年龄"> <template slot-scope="scope">
                <span>{{scope.row.age}}</span>
              </template>
            </el-table-column>
            <el-table-column width="180" align="center" label="出生日期"> <template slot-scope="scope">
                  <span>{{scope.row.birthday}}</span>
                </template> 
            </el-table-column>
            <el-table-column width="110" align="center" label="学历"> <template slot-scope="scope">
                    <span v-if="scope.row.degree == 1">高中</span>
                    <span v-if="scope.row.degree == 2">大专</span>
                    <span v-if="scope.row.degree == 3">本科</span>
                    <span v-if="scope.row.degree == 4">硕士</span>
                    <span v-if="scope.row.degree == 5">博士及以上</span>
                  </template> 
            </el-table-column>
            <el-table-column width="200" align="center" label="专业"> <template slot-scope="scope">
                    <span>{{scope.row.universityProfession}}</span>
                  </template> 
            </el-table-column>
            <el-table-column width="100" align="center" label="工作年限"> <template slot-scope="scope">
                <span>{{scope.row.workTimeSpan || 0 }}年</span>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" label="现工作单位"> <template slot-scope="scope">
                <span>{{scope.row.lastWorkCompany}}</span>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" label="现工作职位"> <template slot-scope="scope">
                <span>{{scope.row.lastWorkPosition}}</span>
              </template>
            </el-table-column>
            <el-table-column width="100" align="center" label="当前所在省"> <template slot-scope="scope">
                <span>{{scope.row.lastWorkProvinceName}}</span>
              </template>
            </el-table-column>
            <el-table-column width="100" align="center" label="当前所在市"> <template slot-scope="scope">
                <span>{{scope.row.lastWorkCityName}}</span>
              </template>
            </el-table-column>
            <el-table-column width="120" align="center" label="联系电话"> <template slot-scope="scope">
                    <span>{{scope.row.phone}}</span>
                  </template> 
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="250"> <template slot-scope="scope">
                <el-button size="small" type="success" @click="handleViewResume(scope.row)">查看简历</el-button>
                <el-button size="small" type="success" @click="handleUpdateResume(scope.row)">编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
                </el-button>
              </template> 
            </el-table-column>
          </el-table>

            <div v-show="!listLoading" class="pagination-container">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
            </div>
       </div>
     </el-card>
  </el-col>
</el-row>

  <el-dialog :visible.sync="importDialogVisible" width="30%">
    <el-upload class="excel-uploader" drag :multiple="false" 
              :headers = "uploadHeaders"
              :show-file-list="false" action="/api/admin/excelauth/upload"
              :on-success="handleImportScucess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <!-- <div class="dialog-footer">
      <el-button type="primary" @click="importSure">确 定</el-button>
    </div> -->
  </el-dialog>

  </div>
</template>

<script>
import { getAreaListObj } from 'api/admin/student/index';
import { fetchJieOptionsObj } from 'api/admin/person/index';
import { getToken } from 'utils/auth';
import { page, fetchClassTreeObj, delObj, exportObj } from 'api/admin/talent/index';
import { mapGetters } from 'vuex';
import { Message, MessageBox } from 'element-ui';
export default {
  name: 'talentList',
  components: {
  },
  data() {
    return {
      jieOptions:[],
      filterText: '',
      list: null,
      total: null,
      importDialogVisible: false,
      searchSelectObj:{
        searchKey: null,
        searchValue: null
      },
      searchCustomObj:{
        name: null,
        age: null,
        universityProfession: null,
        phone: null
      },
      jieId:null,
      listQuery: {
        page: 1,
        limit: 10,
        name: null,
        areaId:null,
        schoolId:null,
        lastWorkProvinceId:null,
        lastWorkCityId:null,
        classId:null,
        sessions: null,
        degree: null,
        workTimeSpan: null,
        sex: null,
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        code: null,
        title: null,
        parentId: null,
        href: null,
        icon: null,
        orderNum: null,
        description: null,
        path: null,
        enabled: null,
        type: null,
        attr1: null
      },
      currentId: -1,
      listLoading: true,
      tableKey: 0,
      multipleSelection: [],

      provinceOptions: [],
      cityOptions: [],
      uploadHeaders:  {
        Authorization: getToken()
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  created() {
    //初始化届下拉数据
    this.getJieOptions();
    this.getAreaList('');
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
    },
    //获取届列表
    getJieOptions() {
      fetchJieOptionsObj().then(res => {
        if(res && res.data){
          this.jieOptions = res.data;
          this.listQuery.sessions = res.data[0];
          this.getClassTree(res.data[0]);
          this.getList();
        }
      });
    },
    jieChange (jieId) {
     this.jieId = jieId;
     this.getClassTree(jieId);
    },
    //获取班级树
    getClassTree(jieId) {
      var param = {sessions: jieId};
      fetchClassTreeObj(param).then(res => {
        if(res && res.data){
          this.treeData = JSON.parse(res.data.areaSchoolTreeList);
        }
      });
    },
    //获取省市列表
    getAreaList(pid) {
      getAreaListObj(pid).then(res => {
        this.provinceOptions = res.data;
      });
    },
    provinceChange(id){
      getAreaListObj(id).then(res => {
        this.cityOptions = res.data;
      });
    },
    handleSelectionChange(val) {
      let selectedIds = [];
      val.forEach(element => {
        selectedIds.push(element.id);
      });
      this.multipleSelection = selectedIds;
    },
    //批量导入
    handleImport(){
      this.importDialogVisible = true;
    },
    //批量导入-成功
    handleImportScucess(res, file){
      if(res && res.rel){
        this.importDialogVisible = false;
        this.$alert('导入成功，数据将稍后同步到列表...', '提示', {
          confirmButtonText: '确定',
          type: 'success',
          callback: action => {
            this.getList();
          }
        });
      }else{
        this.$message.error('导入失败!');
      }
    },
    //批量导入-确定
    importSure(){
      this.importDialogVisible = false;
      this.getList();
    },
    //批量导出
    handleExport(){
      if(this.multipleSelection.length == 0){
        Message({
          message: '请先选择一行数据',
          type: 'warning',
          duration: 3 * 1000
        });
        return;
      }
      // var exportParam = this.multipleSelection.join(',');
      // exportObj(exportParam).then((data) => {
      //   this.$notify({
      //     title: '成功',
      //     message: '导出成功',
      //     type: 'success',
      //     duration: 2000
      //   });
      // });
      window.location.href = '/api/admin/excel/down?ids='+this.multipleSelection.join(',');
    },
    handleFilter() {
      let sKey = this.searchSelectObj.searchKey;
      this.searchCustomObj.name = null;
      this.searchCustomObj.age = null;
      this.searchCustomObj.phone = null;
      this.searchCustomObj.universityProfession = null;
      this.searchCustomObj[sKey] = this.searchSelectObj.searchValue;
      this.listQuery = Object.assign({}, this.listQuery,  this.searchCustomObj);
      this.getList();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getNodeData(data) {
      if (data.type == 1) {
        this.listQuery.areaId = data.id;
        this.listQuery.schoolId = null;
        this.listQuery.classId = null;
      }else if(data.type == 2){
        this.listQuery.areaId = null;
        this.listQuery.schoolId = data.id;
        this.listQuery.classId = null;
      }else if(data.type == 3){
        this.listQuery.areaId = null;
        this.listQuery.schoolId = null;
        this.listQuery.classId = data.id;
      }else{
        this.listQuery.areaId = null;
        this.listQuery.schoolId = null;
        this.listQuery.classId = null;
      }
    },
    //添加简历
    handlerAdd() {
      this.setLocalCurrentIdCard(null);
      this.$router.push({ path: '/talentManager/resume' });
    },
    //下载模板
    downloadTemplate() {
      // window.location.href = 'http://106.54.253.224:9999/download?filename=%2Fdata%2Ftalent%2F简历模板.xlsx';
      window.location.href = 'http://'+window.location.host+'/static/cp/简历模板.xlsx'
    },
    //删除简历
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(row.id).then(() => {
          this.getList();
          this.resetForm();
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        });
      });
    },
    //查看简历
    handleViewResume(row) {
      //将idCard放入本地缓存中
      this.setLocalCurrentIdCard(row.idCard);
      this.$router.push({ path: '/talentManager/resumePreview'});
    },
    //编辑简历
    handleUpdateResume(row) {
      this.setLocalCurrentIdCard(row.idCard);
      this.$router.push({ path: '/talentManager/resume'});
    },
    //设置本地存储idCard
    setLocalCurrentIdCard(idCard) {
      window.localStorage.setItem('currentIdCard', idCard)
    },
    resetForm() {
      this.form = {
        code: null,
        title: null,
        parentId: this.currentId,
        href: null,
        icon: null,
        orderNum: null,
        description: null,
        path: null,
        enabled: null
      };
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    //获取年份列表[1999~当前年]
    getYearList(){
        var arr = [];
        var base = 1999;
        var currentYear = new Date().getFullYear();
        for(let i=currentYear; i >= base; i--){
            arr.push(i);
        }
        return arr;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.talent-list-wrap{
  .search-degree-form-item{
    margin-bottom: 0;
  }
  .el-form-item{
    margin-bottom: 10px;
  }
}
.search-row{
  margin: 10px 0;
}
.form-search-area{
  padding: 10px 10px;
  margin: 10px 10px;
  -moz-box-shadow:0px 0px 10px #d8d8d8; 
  -webkit-box-shadow:0px 0px 10px #d8d8d8; 
  box-shadow:0px 0px 10px #d8d8d8;
}
.excel-uploader{
  text-align: center;
}
.dialog-footer{
  padding: 10px 0;
  text-align: right;
}
</style>